<template>
  <div class="common-layout">
    <el-container>
      <el-aside :span="4">
        <!-- left menu start -->
        <el-col style="min-height: 100%; background-color: #545c64; height: 100vh">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <icon-menu/>
                </el-icon>
                <span>菜单</span>
              </template>
              <el-menu-item index="1-2">
                <router-link to="/list" class="router-item">回忆列表</router-link>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
        <!-- left menu end -->
      </el-aside>
      <el-container>
        <el-header>
          <Header></Header>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Search
} from '@element-plus/icons-vue';
import Header from "@/components/Header";
</script>


<style>
.router-item {
  color: #b0c4de;
}
</style>
